import React from "react";
import { View, Text } from "@tarojs/components";
import Image from "@/components/Image";
import iconSchool from "@/images/order_icon_product_school.png";
import iconMajor from "@/images/order_icon_product_profession.png";
import iconTime from "@/images/order_icon_product_time.png";
import iconLocation from "@/images/icon_location.png";
import iconAgent from "@/images/icon_organization.png";
import classNames from "classnames";

import { GoodsItemData } from "./data";
import "./index.scss";

const Index: React.FC<GoodsItemData & { className?: string }> = (
  props: GoodsItemData & { className?: string }
) => {
  const statusMap = {
    order_launched: "待支付",
    payment_finished: "待发货",
    delivery_finished: "待收货",
    order_finished: "已完成",
    order_closed: "已取消",
  };
  return (
    <View
      className={classNames(
        "goods-item-card",
        props.className && props.className
      )}
      onClick={props.onClick}
    >
      <Image className="logo" src={props.thumbnail} />
      <View className="item-con">
        <View className="top">
          <View className="school">
            <Image className="icon" src={iconSchool} />
            <View className="name">{props.school_name}</View>
          </View>
          <View className="major">
            <Image className="icon" src={iconMajor} />
            <View className="name">{props.major_name}</View>
          </View>
          {props.status && (
            <View
              className="status"
              style={`color:${
                props.status === "order_finished" ||
                props.status === "order_closed"
                  ? "#999999"
                  : "#71D2AB"
              }`}
            >
              {statusMap[props.status]}
            </View>
          )}
        </View>

        <View className="info">
          <View className="year">
            <Image className="icon" src={iconTime} />
            <View className="name">{props.duration}</View>
          </View>
          <View className="loaction">
            <Image className="icon" src={iconLocation} />
            <View className="name">{props.school_city}</View>
          </View>
          <View className="tag" style="background:#E6F9F1;color:#43C590;">
            {props.brand_name}
          </View>
          <View className="tag" style="background:#FFF1DE;color:#FF9500;">
            {props.category}
          </View>
        </View>

        <View className="price">
          <Text className="symbol">￥</Text>
          <Text className="money">{(props.sale_price / 100).toFixed(2)}</Text>
          {props.count ? (
            <Text className="text"> x {props.count}</Text>
          ) : (
            <Text className="text">起</Text>
          )}
        </View>

        <View className="merchant">
          <Image className="icon" src={iconAgent} />
          <View className="name">{props.agent_name}为您服务</View>
        </View>
      </View>
    </View>
  );
};

export default Index;
